<template>
  <div class="signContainer">
      <div class='timeline'>
        <scroll-view style='height:100%;' :scroll-y="true"  @scrolltolower="scrolltolower">
          <div class='time-item' v-for='(item,key) in dataList' :key='key'>
            <div class='circle'></div>
            <div class='time-content'>
              <div class='time-format'>{{item.time}}</div>
              <div class='time-img' v-if='item.status==0'><img src='/static/images/signin_icon_signin@3x.png'/><div class='color-blue'>签到</div></div>
              <div class='time-img' v-if='item.status==1'><img src='/static/images/signin_icon_signout@3x.png'/><div class='color-orange'>签退</div></div>
            </div>
          </div>
        </scroll-view>
      </div>
      
      <div>
      <div class='btn-bottom'>
          <i-row>
              <i-col span="12" offset='6' i-class="col-class">
                <i-button @click="handleClick(1)" type="primary" size='small' shape="circle"  v-if='status==0' i-class='btn-signIn red'>签退</i-button>
                <i-button @click="handleClick(0)" type="primary" size='small' shape="circle"  v-if='status==1' i-class='btn-signIn'>签到</i-button>
              </i-col>
          </i-row>
      </div>
      </div>
      <i-toast id="toast" />
  </div>
</template>

<script type="text/javascript">
import { $Toast } from '@/../static/iview/base/index';
import { mapState } from 'vuex';
import moment from 'moment';
export default {
  data() {
    return {
      dataList:[],
      status:0,
      queryTime:moment().add(1,'minutes').seconds()
    }
  },
  onShow(){
    this.dataList = [];
    this.queryTime = new Date().getTime();
    this.queryHistory();
  },
  methods:{
    queryHistory(){
      this.$http.post({
        url:'/attendance/getHistory',
        data:{
            ukey:this.userInfo.ukey,
            attendanceTime:this.queryTime
        }
      }).then(res=>{
        if(res.s==0){
          res.i.Data.map(item=>{
            item.time = moment(new Date(item.attendanceTime)).format('YYYY/MM/DD HH:mm');
            this.dataList.push(item);
          })
          if(this.dataList.length>0) this.status = this.dataList[0].status;
        }
      }).catch((e)=>{
        console.log('获取失败',e)
      })
    },
    handleClick(status){
        if(this.dataList.length>0){
          var last = moment(new Date(this.dataList[0].attendanceTime)).add(1, 'hours');
          var before = last.isBefore(moment().format('YYYY-MM-DD HH:mm'))
          if(!before) {
            $Toast({
                content: "距离上次签到不足一小时"
            });
            return;
          }
        }
        this.$http.post({
          url:'/attendance/putStatus',
          data:{
              ukey:this.userInfo.ukey,
              status
          }
        }).then(res=>{
          if(res.s==0){
            $Toast({
                content: status?'签退成功':'签到成功'
            });
          }
        }).catch((e)=>{
          console.log('获取失败',e)
        })
    },
    scrolltolower(){
      this.queryTime = this.dataList[this.dataList.length-1].attendanceTime;
      this.queryHistory()
    }
  },
  computed:{
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less">
  Page{
    background:#f1f6fa;
    height:100%;
  }
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .signContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .timeline{
      flex:1;
      height:50rpx;
      margin:10px;
      margin-bottom:2px;
      background: #fff;
      border:1px solid #ebebeb;
      border-radius: 6px;
      .time-item{
        display:flex;
        padding:0 20rpx;
        height: 180rpx;
        overflow: hidden;
        .circle{
          width:20rpx;
          height: 180rpx;
          margin-left:10rpx;
          position:relative;
          &:before{
            content:'';
            display:inline-block;
            position: absolute;
            left:50%;
            top:0;
            width:1px;
            height: 180rpx;
            background:#e0e0e0;
          }
          &:after{
            content:'';
            display:inline-block;
            position: absolute;
            left:50%;
            top:50%;
            width:20rpx;
            height: 20rpx;
            border-radius: 12rpx;
            margin-left:-12rpx;
            margin-top:-12rpx;
            background:#fff;
            border:2rpx solid #e0e0e0;
          }
        }
        .time-content{
          flex:1;
          margin:0 16rpx; 
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e0e0e0;
          .time-format{
            flex:1;
            line-height: 180rpx;
            color:#8d8d8d;
          }
          .time-img{
            img{
              width: 40rpx;
              height: 40rpx;
            }
            font-size:24rpx;
            .color-blue{
              color:#0f7fd3
            }
            .color-orange{
              color:#ff9d37
            }
          }
        }
        &:last-child{
          .time-content{
            border-bottom: none;
          }
        }
      }
    }
    .btn-signIn{
      font-size:32rpx;
      background: #0d79cd;
      &.red{
        background:#ff554d!important;
      }
    }
  }
</style>
